<template>
	<div class="brand">
		<el-row>
			<el-col :span="4">
				<el-button @click=openAddDialog>新增品牌</el-button>
			</el-col>
			<el-col :span="13">
				<el-button type="text"></el-button>
			</el-col>
			<el-col :span="7">
				<el-form :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="搜索">
						<el-input v-model="formInline.name" placeholder="名称"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="onSubmit">查询</el-button>
					</el-form-item>
				</el-form>
			</el-col>
		</el-row>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="id" label="id" width="180">
			</el-table-column>
			<el-table-column prop="name" label="名称" width="180">
			</el-table-column>
			<el-table-column label="LOGO">
				<template slot-scope="scope">
					<img :src="scope.row.image" style="width: 25%; height: 10%;" />
				</template>
			</el-table-column>
			<el-table-column prop="letter" label="首字母">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="toUpdate(scope.row)">编辑</el-button>

					<el-button size="mini" type="danger" @click="removeBrand(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-row>
			<el-col>
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
				 :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</el-col>
		</el-row>








		<el-dialog title="添加品牌" :visible.sync="addDialogVisible" width="30%">
			<el-form ref="form" :model="addForm" label-width="90px">
				<el-form-item label="品牌名称:">
					<el-input v-model="addForm.name"></el-input>
				</el-form-item>
				<el-form-item label="品牌授字母:">
					<el-input v-model="addForm.letter"></el-input>
				</el-form-item>
				<el-form-item label="商品分类:">
					<el-cascader v-model="cids" :options="options" :props="props" clearable></el-cascader>
				</el-form-item>
				<el-form-item label="品牌logo:">
					<el-upload :headers="token" class="avatar-uploader" action="http://localhost:8100/other/file/upload/"
					 :show-file-list="false" :on-success="handleAvatarSuccess">
						<img v-if="imageUrl" :src="imageUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item>
					<el-button @click="doAdd">添加</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>




		<el-dialog title="修改品牌" :visible.sync="editDialogVisible" width="30%">
			<el-form ref="form" :model="editForm" label-width="90px">
				<el-form-item label="品牌名称:">
					<el-input v-model="editForm.name"></el-input>
				</el-form-item>
				<el-form-item label="品牌授字母:">
					<el-input v-model="editForm.letter"></el-input>
				</el-form-item>
				<el-form-item label="商品分类:">
					<el-cascader v-model="cids" :options="options" :props="props" clearable></el-cascader>
				</el-form-item>
				<el-form-item label="品牌logo:">
					<el-upload :headers="token" class="avatar-uploader" action="http://localhost:8100/other/file/upload/"
					 :show-file-list="false" :on-success="handleAvatarSuccess">
						<img v-if="imageUrl" :src="imageUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item>
					<el-button @click="doEdit">修改</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>





	</div>

</template>

<script>
	export default {
		data() {
			return {
				cids: [],
				options: [],
				tableData: [],
				total: 0,
				current: 1,
				pageSize: 5,
				pageSizes: [5, 7, 9],
				formInline: {
					name: ''
				},
				addDialogVisible: false,
				editDialogVisible: false,
				addForm: {
					name: '',
					letter: '',
					image: '',
					ids: ''

				},
				editForm: {
					id: '',
					name: '',
					letter: '',
					image: '',
					ids: ''

				},
				props: {
					value: 'id',
					label: 'name',
					children: 'categoryList',
					multiple: true,
				},
				imageUrl: '',
				token: {
					token: window.localStorage.getItem('token')
				}
			};
		},
		created: function() {
			this.initData();
			this.initCategory();
		},
		methods: {
			doEdit() {
				let ids = this.cids.map((row) => row[2]).join(',');
				this.editForm.ids = ids;
				this.axios.post(this.$baseUrl + 'product/brand/update', this.editForm).then((res) => {
					//console.log(res);
					if (res.data.result) {

						this.$message('修改成功');
						this.editDialogVisible = false;
						this.initData();
					}
				});

			},
			toUpdate(row) {
				this.cids = [];
				this.editDialogVisible = true;

				Object.assign(this.editForm, row);
				this.imageUrl = row.image;

				this.axios.get(this.$baseUrl + "product/brand/selectCategoryIdsByBrandId", {
					params: {
						brandId: row.id,

					}
				}).then((res) => {
					//随机生成一个数组名
					
					
					var length = res.data.data.length;
					let np=[];
					for (var i = 0; i < res.data.data.length; i++) {
					var	node=new Array();
						node[0] = res.data.data[i].t1;
						node[1] = res.data.data[i].t2;
						node[2] = res.data.data[i].t3;
						np[i]=node;
					}
					this.cids=np;

				})

			},
			initCategory() {
				this.axios.get(this.$baseUrl + "product/category/list").then((res) => {
					//console.log(res);
					this.options = res.data.data;
				})
			},
			doAdd() {
				console.log(this.cids);
				let ids = this.cids.map((row) => row[2]).join(',');
				this.addForm.ids = ids;

				//console.log(this.addForm);
				this.axios.post(this.$baseUrl + 'product/brand/insert', this.addForm).then((res) => {
					if (res.data.result) {
						this.$message('添加成功');
						this.addDialogVisible = false;
						this.initData();
					}
				});

			},
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
				if (this.addDialogVisible) {
					this.addForm.image = res.data.imgUrl;
				}
				if (this.editDialogVisible) {
					this.editForm.image = res.data.imgUrl;
				}

			},
			openAddDialog() {
				this.addDialogVisible = true;
			},
			onSubmit() {
				this.initData();

			},
			initData() {
				this.axios.get(this.$baseUrl + 'product/brand/list', {
					params: {
						current: this.current,
						size: this.pageSize,
						name: this.formInline.name
					}
				}).then((res) => {
					this.tableData = res.data.data.records;
					this.total = res.data.data.total;

				});
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.initData();
			},
			handleCurrentChange(val) {
				this.current = val;
				this.initData();
			},
			removeBrand(row) {
				this.$confirm('你确定要删除选中的数据吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					this.axios.get(this.$baseUrl + 'product/brand/delete', {
						params: {
							id: row.id
						}
					}).then((response) => {
						//console.log(response.data);
						if (response.data.result) {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.current = 1;
							//重新初始化数据
							this.initData();
						}
					});

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				})
			}

		}
	};
</script>

<style>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
